@import '@/assets/styles/adaptive.scss'; // 响应式自适应设置

// element-plus样式重置
body{
  --placeholder-color: #5B677E;
  --placeholder-input-color: #6b7180;
  // 重置select
  .el-select {
    width: 100%;
    --el-select-border-color-hover: var(--input-border-color);
    --el-select-input-focus-border-color: var(--input-border-color);
  }
  .el-form{
    &.form-size-small{
      .el-input__wrapper,
      .el-form-item__label{
        height: var(--rem-40);
        line-height: var(--rem-40);
      }
    }
    &.item-not-margin-top{
      .el-form-item{
        margin-top: 0;
      }
    }
  }
  // 重置input
  .el-form-item{
    margin-top: var(--rem-20);
    margin-bottom: 0px;
    &.z-form-item-flex-tips{
      .el-form-item__content{
        flex-wrap: wrap;
      }
    }
    &.z-form-item-flex{
      .el-form-item__content{
        justify-content: space-between;
        flex-wrap: nowrap;
      }
      &.average{
        .el-input{
          width: 48%;
        }
      }
      span.reset-pssword-txt-btn{
        color: var(--z-bg-btn);
        cursor: pointer;
      }
    }
    &.z-form-item-long-checkbox{
      .el-checkbox{
        white-space: break-spaces;
        align-items: start;
        .el-checkbox__label{
          font-size: var(--rem-12);
          line-height: 1.4;
        }
      }
    }
    &.phone-form{
      .el-form-item__content{
        justify-content: space-between;
        flex-wrap: nowrap;
      }
      .el-select{
        width: 50%;
        margin-right: var(--rem-10);
      }
    }
    &.form-input-code{
      .el-form-item__content{
        flex-wrap: nowrap;
        .el-button{
          width: var(--rem-160);
          margin-left: var(--rem-10);
        }
      }
    }
  }
  .el-form-item__label{
    height: var(--rem-54);
    line-height: var(--rem-54);
  }
  .z-no-border{
    .el-input__wrapper{
      box-shadow: none;
      &:hover{
        box-shadow: none;
      }
      &.is-focus{
        box-shadow: none;
      }
    }
  }
  .phone-area-option{
    display: flex !important;
    align-items: center;
    img{
      width: var(--rem-20);
      height: var(--rem-20);
      margin-right: var(--rem-10);
    }
  }
  .el-date-editor,
  .el-input__wrapper{
    border-radius: var(--rem-40);
    background-color: var(--z-bg-select-def) !important;
    box-shadow: 0 0 var(--rem-2) var(--input-border-color) inset;
    &:hover{
      // box-shadow: 0 0 var(--rem-2) var(--el-input-focus-border-color) inset;
      box-shadow: 0 0 var(--rem-2) var(--input-border-color) inset;
    }
    &.is-focus{
      // box-shadow: 0 0 var(--rem-2) var(--el-input-focus-border-color) inset;
      box-shadow: 0 0 var(--rem-2) var(--input-border-color) inset;
    }
    .el-input__suffix{
      width: var(--rem-20);
      margin-right: var(--rem-5);
    }
    .el-input__prefix-inner>:last-child{
      margin-right: 0;
    }
    .el-input__inner {
      height: var(--rem-54);
      border-radius: var(--border-radius);
      border: none;
      color: var(--z-font-anti);
      text-indent: 0;
      padding: 0 var(--input-padding);
      font-family: "Montserrat-Medium";
      &::-webkit-input-placeholder {
        color: var(--placeholder-input-color) !important;
      }
    }
  }
  .el-input.el-input--small{
    .el-input__wrapper{
      .el-input__inner{
        height: var(--rem-40);
      }
    }
  }
  .el-date-editor.el-input,
  .el-date-editor.el-input__wrapper{
    width: 100%;
    height: auto;
    .el-input__wrapper{
      width: 100%;
    }
  }
  // 下拉框有el-input--suffix的时候
  .el-select.z-select-prefix{
    .el-input--suffix{
      .el-input__wrapper{
        .el-input__inner{
          padding-left: 0;
        }
      }
    }
  }
  .zee-form-height-40{
    .el-input__wrapper{
      .el-input__inner{
        height: var(--rem-40);
        border-radius: var(--rem-40);
      }
    }
  }
  .el-select__popper.el-popper{
    background-color: var(--bg-tab) !important;
  }
  // 重置按钮
  .el-button{
    width: 100%;
    height: var(--rem-45);
    border-radius: var(--rem-45);
    font-size: var(--rem-14);
    &.el-button--large{
      height: var(--rem-54);
      border-radius: var(--rem-54);
    }
    &.el-button--small{
      height: var(--rem-40);
      border-radius: var(--rem-40);
    }
    &:hover{
      background-color: var(--el-color-primary);
    }
    &:not(.is-disabled):active{
      transform: scale(0.95);
    }
  }

  .record-form-dropdown-list{
    img{
      display: block;
      width: var(--rem-20);
      height: var(--rem-20);
      margin-right: var(--rem-20);
    }
  }

  // vant折叠面板
  .van-collapse{
    margin-top: var(--rem-30);
    &::after{
      border: 0 none;
    }
    .van-cell{
      background-color: var(--z-bg-card) !important;
      border-radius: var(--rem-30);
      &::after{
        border: 0 none;
      }
    }
    .van-collapse-item{
      margin-bottom: var(--rem-10);
      &::after{
        border: 0 none;
      }
    }
    .van-collapse-item__content{
      background: transparent !important;
      color: var(--z-font-def);
    }
  }

  // 重置时间区间框
  .el-range-editor.el-input__wrapper{
    width: 100%;
  }

  // 重置vantui中的tab
  .van-tabs__nav{
    background: transparent;
  }


  // 重置表格
  .el-table{
    &.record-table{
      .el-table__header-wrapper{
        th{
          background-color: transparent;
          font-size: var(--rem-14);
          color: #6b7180;
          font-weight: normal;
          padding: var(--rem-20) 0;
        }
      }
    }
    .el-table__inner-wrapper::before{
      background-color: transparent;
    }
  }

  // 重置checkbox
  .el-checkbox:not(.normal){
    .el-checkbox__label{
      color: var(--placeholder-color);
    }
    .el-checkbox__input{
      &.is-checked .el-checkbox__inner {
        width: 18px;
        height: 18px;
        background-color: var(--z-bg-select-def-hover) !important;
        border: 2px solid var(--z-checkbox-border);
        border-radius: 6px;
      }
      &.is-disabled .el-checkbox__inner {
        width: 18px;
        height: 18px;
        background-color: var(--z-bg-select-def-hover) !important;
        border: 2px solid var(--z-checkbox-border);
        border-radius: 6px;
      }
      .el-checkbox__inner {
        width: 18px;
        height: 18px;
        border-radius: 6px;
        background-color: var(--z-bg-select-def-hover);
        border: 2px solid var(--z-checkbox-border);
        &::after {
          width: 6px;
          height: 12px;
          font-weight: 700;
          left: 4px;
          top: -2px;
          border-color: var(--z-checkbox-color);
        }
      }
    }
  }

  // 重置弹出pop
  .el-popover.el-popper{
    &.z-card-tips{
      border-radius: var(--rem-15);
      min-width: var(--rem-180);
    }
  }

  .van-picker__toolbar{
    height: var(--rem-54);
    button{
      font-size: var(--rem-16);
    }
  }

  // 重置vant 弹出层
  .van-popup{
    &:not(.van-notify--primary):not(.van-notify--success):not(.van-notify--danger):not(.van-notify--warning){
      background-color: var(--z-bg-card);
    }
    &.van-popup--center{
      border-radius: var(--rem-20);
    }
    &.mine-h5-popup{
      border-top-left-radius: var(--rem-20) !important;
      border-top-right-radius: var(--rem-20) !important;
    }
  }

  // 徽标
  .van-badge__wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    .van-badge--dot{
      background-color: var(--z-bg-act);
    }
  }


  /** h5重置 */
  .h5-system-layout{
    .z-dialog-wrapper{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      border-radius: 0;
    }
  }

}
